<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="bg-container">
        <div class="my-header">
          <div class="my-header1">
            <div class="my-header11">
              <div>待处理数据条目数:</div>
              <span>{{ daiCl }}</span>
            </div>
            <div class="my-header12">
              <div>本月已处理进度:</div>
              <span>{{ yiCl }}</span>
            </div>
            <div class="my-header13">
              <div>已排产量:</div>
              <span>{{ yiPc + 'KG' }}</span>
            </div>
          </div>
        </div>
      </div>
    </template>

    <template #pageTabel>
      <a-tabs   :lazy-load="true" @change="changeKey" :justify="true" :default-active-key="pageData.tableIndex">
        <a-tab-pane title="未排产" key="1">
          <div style="height: 90%">
            <NotScheduledVue></NotScheduledVue>
          </div>
        </a-tab-pane>
        <!-- <a-tab-pane title="预排产" :key="2">
                      <div style="height: 100%">
                          <PreScheduled2 ref="perSch"></PreScheduled2>
                      </div>
                  </a-tab-pane> -->
        <a-tab-pane title="已排产" key="2">
          <div style="height: 90%">
            <ScheduledProduction ref="schePro"></ScheduledProduction>
          </div>
        </a-tab-pane>
        <a-tab-pane title="" key="3">
          <div style="height: 90%">
            <EmbroideryList2></EmbroideryList2>
          </div>
        </a-tab-pane>
      </a-tabs>
    </template>
  </pageTabelLayout>
</template>

<script lang="ts">
import { post, get } from '@/api/http'
import Toolbar from '@/components/Toolbar.vue'
import { Message } from '@arco-design/web-vue'
import { ref, reactive, onMounted, toRefs, defineComponent, watch, getCurrentInstance } from 'vue'
import NotScheduledVue from './components/NotScheduled.vue'
import PreScheduled2 from './components/PreScheduled2.vue'
import ScheduledProduction from './components/ScheduledProduction.vue'
import EmbroideryList2 from './components/EmbroideryList2.vue'
import emitter from '@/hooks/useEventBus'

export default defineComponent({
  name: 'Scheduling',
  setup() {
    const { proxy } = <any>getCurrentInstance()
    const tabValue = ref<any>(proxy.$route.query.key)
    const pageData = reactive<any>({
      tableIndex: tabValue || '1',
    })
    const daiCl = ref('')
    const yiCl = ref('')
    const yiPc = ref('')
    cxs()
    emitter.on('bcCx', () => {
      cxs()
    })
    function cxs() {
      post({
        url: 'planSingle/planSchedul/getScheduleCount',
      }).then((res: any) => {
        if (res.code == 200) {
          daiCl.value = res.data.l
          yiCl.value = res.data.z
          yiPc.value = res.data.y
        } else {
          Message.warning(res.message)
        }
      })
    }
    const headerShow = ref<boolean>(true)
    let keys = ref(1)
    const schePro = ref()
    const perSch = ref()
    const queryData = reactive({
      firm: '',
      clothType: '',
    })

    const changeKey = (key: any) => {
      keys.value = key
      //  if(key == 3){
      //     schePro.value.doRefresh()
      //  }
      //  if(key == 2){
      //     perSch.value.doRefresh()
      //  }
    }

    return {
      daiCl,
      yiCl,
      yiPc,
      changeKey,
      queryData,
      keys,
      schePro,
      perSch,
      headerShow,
      pageData,
    }
  },
  components: { Toolbar, NotScheduledVue, PreScheduled2, ScheduledProduction, EmbroideryList2 },
})
</script>
<style scoped lang="less">
.my-header1 {
  width: 500px;
  display: flex;
  justify-content: space-between;

  .my-header11 {
    width: 160px;
    height: 70px;
    border: 1px solid rgb(134, 147, 243);
    background-color: rgb(134, 147, 243);
    border-radius: 5px;
    box-shadow: 0px 7px 15px -3px #d4d4d4;
    position: relative;

    div {
      color: #fff;
      position: absolute;
      top: 6px;
      left: 6px;
      font-size: 16px;
      font-weight: 800;
    }

    span {
      color: #fff;
      position: absolute;
      bottom: 5px;
      right: 20px;
      font-size: 15px;
    }
  }

  .my-header12 {
    width: 160px;
    height: 70px;
    border: 1px solid rgb(188, 141, 238);
    background-color: rgb(188, 141, 238);
    border-radius: 5px;
    box-shadow: 0px 7px 15px -3px #d4d4d4;
    position: relative;

    div {
      color: #fff;
      position: absolute;
      top: 6px;
      left: 6px;
      font-size: 16px;
      font-weight: 800;
    }

    span {
      color: #fff;
      position: absolute;
      bottom: 5px;
      right: 20px;
      font-size: 15px;
    }
  }

  .my-header13 {
    width: 160px;
    height: 70px;
    border: 1px solid rgb(191, 191, 0);
    background-color: rgb(191, 191, 0);
    border-radius: 5px;
    box-shadow: 0px 7px 15px -3px #d4d4d4;
    position: relative;

    div {
      color: #fff;
      position: absolute;
      top: 6px;
      left: 6px;
      font-size: 16px;
      font-weight: 800;
    }

    span {
      color: #fff;
      position: absolute;
      bottom: 5px;
      right: 20px;
      font-size: 15px;
    }
  }
}
</style>

